import React, {useEffect, useRef} from 'react';
import jsonp from "jsonp"
let markerLayer
let map
function QMap({value,onChange}) {
    useEffect(()=>{
        if(!map&&value!==undefined){
            //定义地图默认中心点坐标
            var center=new TMap.LatLng(value.lat||39.984120,value.lng||116.307484)
            //创建map对象，初始化地图
            map = new TMap.Map('container', {
                center: center,//设置地图中心点坐标
                zoom:11,   //设置地图缩放级别
            });
            //初始化marker图层
            markerLayer = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map
            });
            //监听点击事件添加marker
            map.on("click", (evt) => {
                // console.log(markerLayer.current)
                markerLayer.setGeometries([])
                markerLayer.add({
                    position: evt.latLng
                });
                onChange(evt.latLng)
            });
        }

    },[value])
    useEffect(()=>{
        return()=>{
            map = null;
        }
    },[])
    useEffect(()=>{
        if(value){
            markerLayer.setGeometries([
                {
                    "position": new TMap.LatLng(value.lat, value.lng),  //点标记坐标位置
                }
            ])
        }
    },[value])
    return (
        <div id={"container"}></div>
    );
}

export default QMap;